<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学车在线首页</title>
    <link rel="stylesheet" href="./css/style.css" />
    <style></style>
  </head>

  <body>
    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
      <div class="box-hd">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
      </div>
      <div class="box-bd">
        <ul class="clearfix">
          <li>
            <a href="#">
              <img src="images/course01.png" alt="" />
              <h4>Think PHP 5.0 博客系统实战项目演练</h4>
              <div class="info">
                <span>高级</span> • <span>1125</span>人在学习
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <script>
      const data = [
        {
          src: 'images/course01.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          num: 1125,
        },
        {
          src: 'images/course02.png',
          title: 'Android 网络动态图片加载实战',
          num: 357,
        },
        {
          src: 'images/course03.png',
          title: 'Angular2 大前端商城实战项目演练',
          num: 22250,
        },
        {
          src: 'images/course04.png',
          title: 'Android APP 实战项目演练',
          num: 389,
        },
        {
          src: 'images/course05.png',
          title: 'UGUI 源码深度分析案例',
          num: 124,
        },
        {
          src: 'images/course06.png',
          title: 'Kami2首页界面切换效果实战演练',
          num: 432,
        },
        {
          src: 'images/course07.png',
          title: 'UNITY 从入门到精通实战案例',
          num: 888,
        },
        {
          src: 'images/course08.png',
          title: 'Cocos 深度学习你不会错过的实战',
          num: 590,
        },
      ]

      //获取元素
      const ul = document.querySelector('.box-bd ul')

      // 遍历数据
      // data.forEach(function (item) {
      //   //1.创建一个新节点
      //   const li = document.createElement('li')
      //   //2.修改内容
      //   li.innerHTML = `
      //       <a href="#">
      //         <img src="${item.src}" alt="" />
      //         <h4>${item.title}</h4>
      //         <div class="info">
      //           <span>高级</span> • <span>${item.num}</span>人在学习
      //         </div>
      //       </a>`
      //   // console.log(li)
      //   //3.添加节点到父元素
      //   ul.appendChild(li)
      // })

      //2.html模版方式

      let html = ''

      data.forEach(function (item) {
        const li = `<li>
            <a href="#">
              <img src="${item.src}" alt="" />
              <h4>${item.title}</h4>
              <div class="info">
                <span>高级</span> • <span>${item.num}</span>人在学习
              </div>
            </a>
          </li>`

        // console.log(li)

        html += li
      })

      console.log(html)

      ul.innerHTML = html
    </script>
  </body>
</html>
